<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>意见反馈</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="line">
            <img :src="$global.Image.icon_goods_line" />
        </div>
        <div class="container">
            <el-select v-model="typeIndex" placeholder="请选择">
                <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.tag_id">
                </el-option>
            </el-select>
            <div style="height:30px"></div>
            <div class="line-ti">
                <div>意见反馈</div>
                <router-link class="new" :to="`/feedbackCreate`">新增意见反馈</router-link>
            </div>
            <div class="list">
                <router-link :to="`/feedbackDetail?id=${item.id}`" class="itm" v-for="(item,index) in listSource" :key="index">
                    <div class="title">
                        <div class="tit-l">{{item.feedback_name}}</div>
                        <div class="tit-r">{{item.create_time}}</div>
                    </div>
                    <div class="content">{{item.content}}</div>
                </router-link>
                <div style="width:346px"></div>
            </div>
            <div class="nodata" v-if="listSource.length == 0">
                <img :src="$global.Image.noDetail" alt="">
            </div>
            <el-pagination background layout="prev, pager, next" :total="count" :current-page="page" :page-size="limit" @current-change="currentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { artIcleList, artFeedback } from "@api/user";
export default {
    data() {
        return {
            page: 1,
            count:0,
            limit: 9,
            typeList: [{ tag_id: "", name: "全部" }],
            typeIndex: "",
            listSource: [],
        };
    },
    watch: {
        typeIndex(n) {
            console.log(n);
            this.getList();
        },
    },
    mounted() {
        this.getList();
        this.getTypeList();
    },
    methods: {
        
        currentChange(e){
            console.log(e)
            this.page = e;
            this.getList()
        },
        getTypeList() {
            artFeedback()
                .then((res) => {
                    console.log(res);
                    let data = res.data;
                    for (let i = 0; i < data.length; i++) {
                        this.typeList.push(data[i]);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        getList() {
            let data = {
                type: 7,
                feedback_type: this.typeIndex,
                page_index: this.page,
                page_size: this.limit,
            };
            artIcleList(data)
                .then((res) => {
                    console.log(res);
                    this.count = res.data.count;
                    this.listSource = res.data.list;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>
<style >
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #da213d;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}
.el-pagination {
    margin: 65px 0;
    display: flex;
    justify-content: center;
}
</style>
<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.line {
    width: 1200px;
    margin: 0 auto 30px;
    img {
        display: block;
        width: 100%;
    }
}
.line-ti {
    width: 100%;
    border-bottom: 1px solid #dbdbdb;
    display: flex;
    .new {
        width: 110px;
        height: 34px;
        background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
        border-radius: 5px;
        font-size: 14px;
        text-align: center;
        color: #ffffff;
        margin-left: auto;
        line-height: 34px;
        &::before {
            height: 0;
        }
    }
    > div {
        color: #da213d;
        font-size: 18px;
        // border-bottom: 3px solid $color;
        // width: 112px;
        line-height: 36px;
        font-weight: bold;
        position: relative;
        &::before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 72px;
            height: 3px;
            background: #da213d;
        }
    }
}
.list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 50px;
    box-sizing: border-box;
    .itm {
        margin-top: 30px;
        width: 346px;
        height: 140px;
        padding: 20px;
        box-sizing: border-box;
        background: url("../../assets/second_icon/demand_list_img.png")
            no-repeat;
        background-size: 100% 100%;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .tit-l {
                font-size: 16px;
                font-weight: bold;
                color: #333333;
            }
            .tit-r {
                font-size: 14px;
                color: #666666;
            }
        }
        .content {
            margin-top: 12px;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
        }
    }
}
</style>